<template>
  <el-dialog
      v-model="repListDialogVisible"
      title="查看评论"
      width="60%"
      :before-close="closeRepListDialog"

  >
    <ul class="infinite-list" v-infinite-scroll="loadDialogList" style="overflow:auto">
      <el-row class="infinite-list-item" v-for="(repItem,index) in repListDialogList" >
        <el-col :span="1" class="h-1 "></el-col>
        <el-col :span="23" class="mt-5" style="border-bottom: 1px solid #f6f6f6; overflow: auto"  >
          <!--                      <el-divider style="margin: 0"></el-divider>-->
          <span class="w-1/2 text-gray-800 ">{{ repItem.SpeakerName }}        <span class="text-gray-500">回复</span>       {{ repItem.RepRepName }}</span>
          <span class="w-max float-right" v-text="filteTime(repItem.CreatedAt)"></span>
          <p v-text="repItem.Content"></p>
          <el-button v-if="discussData.IfDone==='0'"  class="ml-6" type="text" @click="repItem.inputShow=!repItem.inputShow">
            <el-icon :size="15">
              <ChatDotRound/>
            </el-icon>
            <span v-text="replyButtonText(repItem.inputShow)"></span>
          </el-button>
          <el-row v-if="discussData.IfDone==='0'" >
            <el-input class="w-4/5 pr-3" v-show="repItem.inputShow" v-model="repItem.input"
                      placeholder="Please input"
                      clearable/>
            <el-button type="primary" class="w-1/5 " v-show="repItem.inputShow"
                       @click="AddRep(item,repItem)">发布
            </el-button>
          </el-row>

        </el-col>
      </el-row>
    </ul>
<!--    <ul class="infinite-list" v-infinite-scroll="load" infinite-scroll-distance="100" style="overflow:auto">-->
<!--      <li v-for="i in count" class="infinite-list-item">{{ i }}</li>-->
<!--    </ul>-->
  </el-dialog>

  <el-row>
    <el-col :span="5"></el-col>
    <el-col :span="14">
      <div class="panel-body ql-editor" v-html="discussData.Content"></div>
    </el-col>
    <el-col :span="5"></el-col>
  </el-row>
  <el-row>
    <el-col :span="5"></el-col>
    <el-col :span="14">
      <div class="" style="">

        <div style="    font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
    font-size: 15px;
    color: #121212;
    -webkit-tap-highlight-color: rgba(18,18,18,0);
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #ebebeb;
    box-shadow: 0 1px 3px rgba(18,18,18,.1);
    background: #fff;
    margin-top: 12px;
    overflow: visible;
    border-radius: 4px;">
          <div style="    font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
    font-size: 15px;
    color: #121212;
    -webkit-tap-highlight-color: rgba(18,18,18,0);
    -webkit-box-direction: normal;
    background: #fff;
    border-bottom: 1px solid #f6f6f6;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    height: 50px;
    padding: 0 20px;
    border-radius: 2px;">
            <div style="    font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
    font-size: 15px;
    color: #121212;
    -webkit-tap-highlight-color: rgba(18,18,18,0);
    -webkit-box-direction: normal;
    -webkit-box-flex: 1;
    flex: 1 1;">
              <h2 style="    -webkit-tap-highlight-color: rgba(18,18,18,0);
    -webkit-box-direction: normal;
    margin: 0;
    font: inherit;
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    font-synthesis: style;
    color: #121212;">
                {{ commentsInfo.Count }}条评论
              </h2>
            </div>
            <div style="    font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
    font-size: 15px;
    color: #121212;
    -webkit-tap-highlight-color: rgba(18,18,18,0);
    -webkit-box-direction: normal;">
              <button style="    -webkit-tap-highlight-color: rgba(18,18,18,0);
    -webkit-box-direction: normal;
    font: inherit;
    outline: none;
    appearance: none;
    margin: 0;
    display: inline-block;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    background: none;
    color: #8590a6;
    height: auto;
    line-height: inherit;
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;">
                <span style="    -webkit-tap-highlight-color: rgba(18,18,18,0);
    -webkit-box-direction: normal;
    font: inherit;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    color: #8590a6;
    line-height: inherit;
    display: inline-flex;
    align-items: center;">
<svg class="Zi Zi--Switch Button-zi" fill="currentColor" viewBox="0 0 24 24" width="1.2em" height="1.2em"><path d="M13.004 7V4.232c0-.405.35-.733.781-.733.183 0 .36.06.501.17l6.437 5.033c.331.26.376.722.1 1.033a.803.803 0 0 1-.601.264H2.75a.75.75 0 0 1-.75-.75V7.75A.75.75 0 0 1 2.75 7h10.254zm-1.997 9.999v2.768c0 .405-.35.733-.782.733a.814.814 0 0 1-.5-.17l-6.437-5.034a.702.702 0 0 1-.1-1.032.803.803 0 0 1 .6-.264H21.25a.75.75 0 0 1 .75.75v1.499a.75.75 0 0 1-.75.75H11.007z" fill-rule="evenodd"></path></svg>
                切换为时间排序</span>

              </button>

            </div>
          </div>



          <el-row>
            <el-col :span="1" class="h-1"></el-col>
            <el-col :span="22">

              <el-row v-for="(item,index) in commentsInfo.CommentList" >
<!--                <el-divider style="margin: 0"></el-divider>-->
                <el-col class="mt-5 mb-3" :span="24">
                  <span>{{ item.ContentDiscussion.SpeakerName }}:</span>
                  <span class="w-max float-right" v-text="filteTime(item.ContentDiscussion.CreatedAt)"></span>
                  <p v-html="item.ContentDiscussion.Content"></p>
                  <el-button v-if="discussData.IfDone==='0'"  class="ml-6" type="text" @click="item.inputShow=!item.inputShow">
                    <el-icon :size="15">
                      <ChatDotRound/>
                    </el-icon>
                    <span v-text="replyButtonText(item.inputShow)"></span>
                  </el-button>
                  <el-row v-if="discussData.IfDone==='0'"  style="border-bottom: 1px solid #f6f6f6;">
                    <el-input class="w-4/5 pr-3" v-show="item.inputShow" v-model="item.input" placeholder="Please input"
                              clearable/>
                    <el-button type="primary" class="w-1/5 " v-show="item.inputShow" @click="AddRep(item,null)">发布
                    </el-button>
                  </el-row>
                  <el-row v-for="(repItem,index) in item.RepList" >
                    <el-col :span="1" class="h-1 "></el-col>
                    <el-col :span="23" class="mt-5" style="border-bottom: 1px solid #f6f6f6;">
<!--                      <el-divider style="margin: 0"></el-divider>-->
                      <span class="w-1/2 ">{{ repItem.SpeakerName }}      <span class="text-gray-500">回复</span>       {{ repItem.RepRepName }}</span>
                      <span class="w-max float-right" v-text="filteTime(repItem.CreatedAt)"></span>
                      <p v-text="repItem.Content"></p>
                      <el-button v-if="discussData.IfDone==='0'"  class="ml-6" type="text" @click="repItem.inputShow=!repItem.inputShow">
                        <el-icon :size="15">
                          <ChatDotRound/>
                        </el-icon>
                        <span v-text="replyButtonText(repItem.inputShow)"></span>
                      </el-button>
                      <el-row v-if="discussData.IfDone==='0'" >
                        <el-input class="w-4/5 pr-3" v-show="repItem.inputShow" v-model="repItem.input"
                                  placeholder="Please input"
                                  clearable/>
                        <el-button type="primary" class="w-1/5 " v-show="repItem.inputShow"
                                   @click="AddRep(item,repItem)">发布
                        </el-button>
                      </el-row>

                    </el-col>
                  </el-row>
                  <el-row  style="border-bottom: 1px solid #f6f6f6;" v-if="item.RepCount>5">
                    <el-col :span="1" class="h-1"></el-col>
                    <el-col :span="23" class="mt-5">
                      <span class="text-gray-500 leading-10 cursor-pointer" @click="showComment5Rep(item.RepList[item.RepList.length-1].ID,item.RepList)">查看全部{{item.RepCount}}条回复</span>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <el-row>
                <el-pagination background layout="prev, pager, next" :total="this.commentsInfo.Count"
                               @current-change="newPage">
                </el-pagination>
              </el-row>
            </el-col>
          </el-row>
          <div class="ml-5 mt-20 mb-40">
            <el-row v-if="discussData.IfDone==='0'">
              <el-col :span="20">
                <qul-edit :ref="'qul'"></qul-edit>
              </el-col>
              <el-col :span="4" class="grid">
                <el-button type="primary" class="place-self-center" @click="AddComment">发布评论</el-button>
              </el-col>
            </el-row>
            <el-row class="text-red-600" v-if="discussData.IfDone==='1'">
              该题目已经结题无法继续评论
            </el-row>


          </div>
        </div>

      </div>
    </el-col>
    <el-col :span="5"></el-col>
  </el-row>
</template>

<script>
import axios from "axios";
import QulEdit from "./qulEdit";
// import AddContentDiscussion from "./AddContentDiscussion";
import {defineComponent, ref} from 'vue';
import {ElMessageBox} from 'element-plus';
import {ChatDotRound} from "@element-plus/icons";
import moment from "moment";

export default {

  name: "disscuss_detail",
  components: {ChatDotRound, QulEdit},
  setup() {
    const dialogVisible = ref(false)
    const handleClose = (done) => {
      ElMessageBox.confirm('Are you sure to close this dialog?')
          .then(() => {
            done()
          })
          .catch(() => {
            // catch error
          })
    }
    return {
      dialogVisible,
      handleClose,
    }
  },
  created() {
    console.log(this.$route.params.discuss)
    this.discussData = this.$sestor.getSesWithParse(this.$route.query.resId)
    this.setUpData()
  },
  data() {
    return {
      repListDialogVisible :false,
      repListDialogList:[],
      currentPage: 1,
      count: 0,
      discussData: {
        "ID": "1470392651105701888",
        "CreatedAt": "2021-12-13T21:58:21.257+08:00",
        "UpdatedAt": "2021-12-13T21:58:21.257+08:00",
        "DeletedAt": null,
        "Content": "<p>wdad a </p>",
        "Topic": "wdadw ",
        "SponsorId": "2466801906931208192",
        "IfDone": "0",
        "IfTeacher": "1",
        "IfImportant": "0",
        "MsgCount": 0,
        "SponsorName": "马韬循"
      },
      commentsInfo: {
        "CommentList": [
          {
            "ContentDiscussion": {
              "ID": "1470969215950262272",
              "CreatedAt": "2021-12-15T12:09:25.027+08:00",
              "UpdatedAt": "2021-12-15T12:09:25.027+08:00",
              "DeletedAt": null,
              "Content": "wdadad",
              "SpeakerId": "1467655631769964544",
              "TopicId": "1470374068829032448",
              "SpeakerName": "马韬循"
            },
            "RepList": [
              {
                "ID": "1470985621727088640",
                "CreatedAt": "2021-12-15T13:14:36.47+08:00",
                "UpdatedAt": "2021-12-15T13:14:36.47+08:00",
                "DeletedAt": null,
                "ContentsDiscussionId": 1470969215950262272,
                "RepRepId": "1",
                "RepRepName": "mtx",
                "SpeakerId": "1467655631769964544",
                "SpeakerName": "马韬循",
                "Content": "<p>wdada</p>"
              },
              {
                "ID": "1470985695328735232",
                "CreatedAt": "2021-12-15T13:14:54.017+08:00",
                "UpdatedAt": "2021-12-15T13:14:54.017+08:00",
                "DeletedAt": null,
                "ContentsDiscussionId": 1470969215950262272,
                "RepRepId": "1",
                "RepRepName": "马韬循",
                "SpeakerId": "1467655631769964544",
                "SpeakerName": "马韬循",
                "Content": "<p>wdada</p>"
              }
            ]
          }
        ],
        "Count": 1
      }
    }
  },
  methods: {
    load() {
      this.count += 2
    },
    repListScroll(val){
      console.log(val)
    },
    loadDialogList(){
      this.showComment5Rep(this.repListDialogList[this.repListDialogList.length-1].ID,this.repListDialogList)
    },
    closeRepListDialog(){
      this.repListDialogVisible = false
      this.repListDialogList = []
    },
    showComment5Rep(reqId,list){
      axios.get('/api/PageRepListByCommentId?repId='+reqId).then((res)=>{
        if (res.status===200){
          this.repListDialogVisible = true
          if (this.repListDialogList.length===0){
            this.repListDialogList.push(...list)
          }else {
            this.repListDialogList.push(...res.data)
          }

        }
      })
    },
    filteTime(time){
      var moment = require('moment');
      var createTime = moment(time)
      return createTime.year()+'-'+createTime.month()+'-'+createTime.daysInMonth()+' '+createTime.hour()+':'+createTime.minute()
    },
    replyButtonText(bool) {
      if (!bool) {
        return '回复'
      } else {
        return '取消回复'
      }
    },
    newPage(val) {
      this.currentPage = val
      this.setUpData()
    },
    AddRep(discuss, req) {
      console.log(discuss, req)
      if (req != null) {
        var data = {
          RepSpeakerName: req.SpeakerName,
          RepRepId: req.ID,
          contentsDiscussionId: req.ContentsDiscussionId,
          Content: req.input
        }

      } else {
        var data = {
          RepSpeakerName: discuss.ContentDiscussion.SpeakerName,
          RepRepId: "1",
          contentsDiscussionId: discuss.ContentDiscussion.ID,
          Content: discuss.input
        }
      }
      axios.post("/api/AddRep", data).then((res) => {
        if (res.status === 200) {
          // alert("ok")
          this.setUpData()
        }
      })
      console.log(data)
    },
    AddComment() {
      var data = {
        Content: this.$refs.qul.covert2Html(),
        topicId: this.discussData.ID
      }
      axios.post("/api/AddComments", data).then((res) => {
        if (res.status === 200) {
          // alert('ok')
          this.setUpData()
        }
      })
    },
    setUpData() {
      axios.get("/api/PageComments", {
        params: {
          pageSize: 10,
          page: this.currentPage,
          TopicId: this.discussData.ID
        }
      }).then((res) => {
        if (res.status === 200) {
          this.commentsInfo = res.data
        }
      })
    }
  }
}
</script>

<style scoped>
.infinite-list .infinite-list-item {
  display: flex;
}
.infinite-list {
  height: 600px;
}
</style>